body{

}
.focusLink {
    text-align: center;
    z-index: 5;
    position: absolute;
    /*bottom: 0;*/
    width: 100%;
    height: 80px;
    padding: 20px 0;
}

.fix {
    position: fixed;
}

.btn {
    color: #fff;
    -moz-transition: color ease-in 0.4s;
    -ms-transition: color ease-in 0.4s;
    -o-transition: color ease-in 0.4s;
    -webkit-transition: color ease-in 0.4s;
    transition: color ease-in 0.4s;
}

.btn .i, .btn .b {
    position: absolute;
    display: block;
    overflow: hidden;
}

.btn .i {
    width: 1px;
    height: 100%;
}

.btn .b {
    height: 1px;
    width: 100%;
}

.btn .il {
    left: 0;
    bottom: 0;
}

.btn .ir {
    top: 0;
    right: 0;
}

.btn .bt {
    top: 0;
    left: 0;
}

.btn .bb {
    right: 0;
    bottom: 0;
}

.btn .i span, .btn .i em, .btn .i cite, .btn .i b, .btn .b span, .btn .b em, .btn .b cite, .btn .b b {
    position: absolute;
    display: block;
    overflow: hidden;
}

.btn .i cite, .btn .b cite, .btn .i b, .btn .b b {
    background: #fff;
    opacity: 0.2;
    filter: alpha(opacity=20);
    left: 0;
    top: 0;
    -moz-transition: background ease-in 0.4s;
    -ms-transition: background ease-in 0.4s;
    -o-transition: background ease-in 0.4s;
    -webkit-transition: background ease-in 0.4s;
    transition: background ease-in 0.4s;
}

.btn .i span, .btn .b span, .btn .i em, .btn .b em {
    background: #fff;
    -moz-transition: background ease-in 0.4s;
    -ms-transition: background ease-in 0.4s;
    -o-transition: background ease-in 0.4s;
    -webkit-transition: background ease-in 0.4s;
    transition: background ease-in 0.4s;
}

.btn .i cite, .btn .i b {
    width: 1px;
    height: 100%;
    z-index: 1;
}

.btn .i span, .btn .i em {
    width: 2px;
    left: 0;
    height: 17px;
    z-index: 2;
    -moz-transition: height ease-in 0.4s;
    -ms-transition: height ease-in 0.4s;
    -o-transition: height ease-in 0.4s;
    -webkit-transition: height ease-in 0.4s;
    transition: height ease-in 0.4s;
}

.btn .i span {
    top: 0;
}

.btn .i em {
    bottom: 0;
}

.btn .b cite, .btn .b b {
    width: 100%;
    height: 1px;
    z-index: 1;
}

.btn .b span, .btn .b em {
    width: 10px;
    top: 0;
    height: 1px;
    z-index: 2;
    -moz-transition: width ease-in 0.4s;
    -ms-transition: width ease-in 0.4s;
    -o-transition: width ease-in 0.4s;
    -webkit-transition: width ease-in 0.4s;
    transition: width ease-in 0.4s;
}

.btn .b span {
    left: 0;
}

.btn .b em {
    right: 0;
}

.btn:hover {
    text-decoration: none;
    color: #10ebf7;
}

.btn:hover .il span, .btn:hover .ir em {
    height: 100%;
}

.btn:hover .bt span, .btn:hover .bb em {
    width: 100%;
}

.btn:hover div span, .btn:hover div em {
    background: #30bdd2;
}

.focusLink a {
    color: #FFF;
    display: inline-block;
    height: 80px;
    width: 232px;
    font: 500 20px/80px "microsoft yahei";
}

 .focusLink .get:hover cite{
    transition: opacity ease-in 0.4s;
    opacity: 1;
    background: #30BDD2;
    width: 2px;
    height: 77px;
    left: 12px;
}
 .focusLink .get:hover em{
    height: 47px;
}

.focusLink a {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
    margin: 0 5px;
    width: 204px;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
    padding-left: 28px;
}

.focusLink a > span {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    margin-left: -60px;
    top: 50%;
    margin-top: -10px;
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-transition: opacity ease-in 0.4s, transform ease-in 0.4s;
    -ms-transition: opacity ease-in 0.4s, transform ease-in 0.4s;
    -o-transition: opacity ease-in 0.4s, transform ease-in 0.4s;
    -webkit-transition: opacity ease-in 0.4s, transform ease-in 0.4s;
    transition: opacity ease-in 0.4s, transform ease-in 0.4s;
}

.focusLink a > span.i1 {
    background-position: 0 -360px;
    z-index: 2;
}

.focusLink a > span.i2 {
    background-position: -24px -360px;
    z-index: 2;
}

.focusLink a > span.i3 {
    background-position: -48px -360px;
    z-index: 2;
}

.focusLink a > span.i4 {
    background-position: -72px -360px;
    z-index: 2;
}

.focusLink a > span.i1-1 {
    background-position: 0 -385px;
    z-index: 1;
}

.focusLink a > span.i2-2 {
    background-position: -24px -385px;
    z-index: 1;
}

.focusLink a > span.i3-3 {
    background-position: -48px -385px;
    z-index: 1;
}

.focusLink a > span.i4-4 {
    background-position: -72px -385px;
    z-index: 1;
}

.focusLink a > .op0{
/*, .index .focusLink a:hover > .op1 */
    opacity: 0;
    filter: alpha(opacity=0);
}

.focusLink a > .op1{
/*, .index .focusLink a:hover > .op0 */
    opacity: 1;
    filter: alpha(opacity=100);
}

.focusLink a:hover > .op0 {
    opacity: 1;
    filter: alpha(opacity=0);
}

.focusLink a:hover > .op1 {
    opacity: 0;
    filter: alpha(opacity=100);
}

.focusLink a:hover {
    text-decoration: none;
}

.focusLink a:hover > span {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.focusLink a.home {
    overflow: visible;
}

.focusLink a.home .b em {
    display: none;
}

.focusLink a.home .ir {
    width: 24px;
    right: -23px;
}

.focusLink a.home .ir cite, .index .focusLink a.home .ir b {
    left: 50%;
}

.focusLink a.home .ir cite {
    top: 25%;
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.focusLink a.home .ir b {
    top: -25%;
    left: 50%;
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.focusLink a.home .ir span, .index .focusLink a.home .ir em {
    left: auto;
    right: 0;
    width: 2px;
    height: 16px;
}

.focusLink a.home .ir span {
    top: auto;
    bottom: 50%;
    margin-top: -14px;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.focusLink a.home .ir em {
    top: 50%;
    bottom: auto;
    margin-top: 0;
    margin-left: 23px;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

.focusLink a.home:hover .ir span, .index .focusLink a.home:hover .ir em {
    height: 100%;
}

.focusLink a.home:hover .il em {
    height: 100%;
}

.focusLink a.home:hover .bb span {
    width: 100%;
}

.focusLink a.get {
    overflow: visible;
}

.focusLink a.get .b span {
    display: none;
}

.focusLink a.get .il {
    width: 24px;
    left: -23px;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.focusLink a.get .il cite, .index .focusLink a.get .il b {
    left: 50%;
}

.focusLink a.get .il cite {
    top: 25%;
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.focusLink a.get .il b {
    top: -25%;
    left: 50%;
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.focusLink a.get .il span, .index .focusLink a.get .il em {
    left: auto;
    right: 0;
    width: 2px;
    height: 16px;
    margin-left: 23px
}

.focusLink a.get .il span {
    top: auto;
    bottom: 50%;
    margin-top: -14px;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.focusLink a.get .il em {
    top: 50%;
    margin-left: 23px;
    bottom: auto;
    margin-top: 0;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

.focusLink a.get:hover .il span, .index .focusLink a.get:hover .il em {
    height: 100%;
}

.focusLink a.get:hover .ir span {
    height: 100%;
}

.focusLink a.get:hover .bt em {
    width: 100%;
}

.loading{

}
.loading span{
  display: inline-block;

  /*border-radius: 4px;*/
  /*background: lightgreen;*/
  -webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
  0%,100%{
    height: 40px;
    background: lightgreen;
  }
  50%{
    height: 60px;
    margin-top: -20px;
    background: lightblue;
  }
}
.loading span:nth-child(2){
  -webkit-animation-delay:0.13s;
}
.loading span:nth-child(3){
  -webkit-animation-delay:0.26s;
}
.loading span:nth-child(4){
  -webkit-animation-delay:0.39s;
}
.loading span:nth-child(5){
  -webkit-animation-delay:0.52s;
}
